<template>
  <div class="hello">
    <div class="db"></div>
    <p>温度：{{dhts.c}}</p>
    <p>湿度：{{dhts.h}}</p>
    <p>温湿度更新时间{{dhts.time}}</p>

    <h1>{{msg}}</h1>
     <!-- <h1>顶灯当前状态：{{starts.d}}</h1> -->
     <el-button type="" class="but" @click="kaiguan()">顶灯
      <el-switch
          v-model="starts.d"
          active-color="#13ce66"
          inactive-color="#ff4949"
          active-value="开"
          inactive-value="关"
          >
      </el-switch>
    </el-button>
     <p>上次时间：{{times}}</p>
     <!-- <h1>夜灯当前状态：{{starts.y}}</h1> -->
      <el-button type="" class="but" @click="kaiguan_y()">夜灯
            <el-switch
                v-model="starts.y"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-value="开"
                inactive-value="关"
                >
            </el-switch>
      </el-button>


      <p>上次时间：{{timess}}</p>
      
    <!-- <button class="but" @click="kaiguan()">顶灯</button> -->
    <!-- <button class="but" @click="kaiguan_y()">夜灯</button> -->

    
    
    
    

  </div>
</template>

<script>
import http from '../api';
//setTimeout(function(){this.dht()},1000);
var a = 1;
var b = 1;

export default {
  name: 'HelloWorld',
  data () {
    return {
      button1:true,
      id:1,
      id_y:2,
      msg: '',
      starts:{
        d:"初始化",
        y:"-"
      },
     
      t:1,
      f:0,
      time:"",
      times:"",
      timess:"",
      dhts:{
         c:"-",
         h:"-",
         time:"-"
      }
    }
    
  },
  
  methods:{
    //控制开关
    kaiguan(){

      if(a==1){
        //   this.$api.get('/d/upd?id=1&state=1', ()=>{
         
        // })
        http.esp_upd({
          params:{
            id:this.id,
            state:this.t
          }
        }).then((r) =>{
          console.log(r)
        })
       
        a = 0;
        this.starts.d="开";
        this.$message('这是一条kai消息提示');
        
      }else if(a==0){
        http.esp_upd({
          params:{
            id:this.id,
            state:this.f
           }
        }).then((r) =>{
          console.log(r)

        })
        a = 1;
        this.starts.d="关";
        this.$message('这是一条guan消息提示');
      }
    },
    kaiguan_y(){

      if(b==1){
        //   this.$api.get('/d/upd?id=1&state=1', ()=>{
         
        // })
        http.esp_upd({
          params:{
            id:this.id_y,
            state:this.t
          }
        }).then((r) =>{
          console.log(r)
        })
       
        b = 0;
        this.starts.y="开";

        
      }else if(b==0){
        http.esp_upd({
          params:{
            id:this.id_y,
            state:this.f
           }
        }).then((r) =>{
          console.log(r)

        })
        b = 1;
        this.starts.y="关";
        
      }
    },
    //获取灯状态
    zt(){
      http.esp_s({
        params:{
          id:this.id
        }
      }).then((r=>{
        console.log(r);
        this.times=r.data.data.time
        if(r.data.data.state==1){ 
          a = 0;
          this.starts.d="开"

        }else{
          a = 1;
          this.starts.d="关"
        }
      }))

    },
    zt_y(){
      http.esp_s({
        params:{
          id:this.id_y
        }
      }).then((r=>{
        console.log(r);
        this.timess = r.data.data.time
        if(r.data.data.state==1){ 
          b = 0;
          this.starts.y="开"

        }else{
          b = 1;
          this.starts.y="关"
        }
      }))

    },
    dht(){
      http.dht_sel({
        params:{
          id:10
        }
      }).then((r) => {
          console.log(r.data)
          //alert(r)
          // console.log(data); //结果是string
          this.dhts = r.data.data;
      })
    }
  },
  created(){
      this.dht();
      this.zt();
      this.zt_y();
  }
}
</script>

<style>
.db{
    
    height: 150px;
    
  }
</style>
